<template>
	<view class="tabber" :style="tabbarStyle">
		<view v-for="(item) in tabbarList" :key="item.id" :class="{ item: true, active: currentId === item.id }"
			@tap="tabClickHanduler(item)">
			<block v-if="item.prominent">
				<view class="middle">
					<view class="middle-bg">
						<view class="icon">
							<u-icon size="46" color="#FFF" :name="item.icon"/>
						</view>
					</view>
				</view>
				<view class="middle-show-shadow"></view>
			</block>
			<block v-else>
				<view class="icon">
					<u-icon color="inherit" size="30" :name="currentId === item.id ? item.activeIcon : item.icon"/>
				</view>
				<text class="name">{{item.name}}</text>
			</block>
		</view>
	</view>
</template>

<script setup lang="ts">
	import UIcon from 'uview-ui/components/u-icon/u-icon.vue'
	import { toRefs } from 'vue';
	import { useTabbarStore } from '@/store/tabbar'

	const tabbarStore = useTabbarStore()

	const { tabbarList, currentId, height: tabbarHeight, paddingBottom: tabbarPaddingBottom } = toRefs(tabbarStore)

	function tabClickHanduler(item : (typeof tabbarList.value)[number]) {
		// 如果点击的是自定义了点击逻辑，则执行自定义的点击逻辑
		if (typeof item.activeHandler === 'function') {
			item.activeHandler()
		} else {
			currentId.value = item.id
		}

	}

	const tabbarStyle: Partial<CSSStyleDeclaration> = {
		height: tabbarHeight.value + 'rpx',
		paddingBottom: tabbarPaddingBottom.value + 'px'
	}


	defineExpose({
		tabbarList,
		currentId,
		tabbarStyle
	})
</script>

<style lang="scss" scoped>
	.tabber {
		position: relative;
		display: flex;
		justify-content: space-around;
		width: 100vw;
		background: #FFFFFF;
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, .1);
		padding-bottom: calc(constant(safe-area-inset-bottom));
	}

	.item {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 120rpx;

		&.active {
			color: $u-theme-color;
		}
	}

	.name {
		line-height: 1;
		font-size: 22rpx;
		// background: blue;
	}

	.icon {
		// background: blue;
	}

	.middle {
		position: absolute;
		top: 0;
		height: 140rpx;
		width: 140rpx;
		border-radius: 50%;
		transform: translateY(-50rpx);
		background-color: #FFFFFF;
	}

	.middle-bg {
		position: absolute;
		top: 14rpx;
		left: 14rpx;
		bottom: 14rpx;
		right: 14rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: $u-theme-color;
	}

	.middle-show-shadow {
		position: absolute;
		top: 0;
		height: 140rpx;
		width: 140rpx;
		border-radius: 50%;
		transform: translateY(-50rpx);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, .1);
		z-index: -1;
	}
</style>